<template>
  <div class="area">
    <div class="erea-box">
      <transition
        v-on:before-enter="beforeEnter"
        v-on:leave="leave"
        v-bind:css="false"
      >
        <div class="finally" v-show="showAction">
          <div class="finally-head">
            <div
              v-for="(item, index) in head"
              :key="index"
              class="finally-head-box"
            >
              <img :src="item.imgs" alt="" />
              <div>
                <p class="cate">{{ item.name1 }}</p>
                <p class="cate-detail">{{ item.name2 }}</p>
              </div>
            </div>
          </div>
          <div class="finally-foot">
            <div class="finally-foot-box">
              <div class="ele" v-for="(item, index) in ele" :key="index">
                <div class="ele-left" :id="'ele-left' + (index + 1)"></div>
                <div class="ele-right">
                  <p>{{ item.text1 }}</p>
                  <p>{{ item.tetx2 }}</p>
                </div>
              </div>
            </div>
            <div class="finally-foot-box">
              <div class="ele">
                <img src="../assets/wenduji.png" alt="" />
                <div class="ele-right">
                  <p>21.5°c</p>
                  <p>IN-SIDE TEMP</p>
                </div>
              </div>
              <div class="wind">
                <p class="text1">388 /400</p>
                <p class="text2">空调运行</p>
                <p class="text2">AC FLLING</p>
              </div>
            </div>
            <div class="finally-foot-box">
              <div class="ele">
                <img src="../assets/turn.png" alt="" />
                <div class="wind-right">
                  <p class="p1">99.9%</p>
                  <p class="p2">清洁用水</p>
                  <p class="p2">CLEAN WATER</p>
                </div>
              </div>
              <div class="water">
                <p class="text3">饮用水</p>
                <p class="text3">WATER</p>
                <p class="text3">purification</p>
              </div>
            </div>
            <div class="finally-foot-box">
              <div class="gas" v-for="(item, index) in '123'" :key="index">
                <div
                  :id="item + 'chart'"
                  style="height: 26px; width: 26px"
                ></div>
                <p class="gas-rate">27%</p>
                <div class="gas-right">
                  <p class="gasp">PUI</p>
                  <p class="gasp">FESIADTIE&nbsp;RA</p>
                  <p class="gasp2">0.39.9</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
import { getPieEchart, coordinateSystem } from "../tools/echarts";
export default {
  data() {
    return {
      head: [
        {
          imgs: require("../assets/dian.png"),
          name1: "电力",
          name2: "生态能源",
        },
        {
          imgs: require("../assets/feng.png"),
          name1: "空调通风系统",
          name2: "平均室温",
        },
        {
          imgs: require("../assets/water.png"),
          name1: "水",
          name2: "室内用水",
        },
        {
          imgs: require("../assets/qiti.png"),
          name1: "燃气",
          name2: "位置",
        },
      ],
      ele: [
        {
          rate: "45%",
          text1: "太阳能发电",
          tetx2: "SOLAR POWER",
        },
        {
          rate: "13%",
          text1: "风力发电",
          tetx2: "WIND POWER",
        },
        {
          rate: "45%",
          text1: "校准功率",
          tetx2: "STANDART POWER",
        },
      ],
    };
  },
  mounted() {
    setTimeout(() => {
      [1, 2, 3].forEach((element) => {
        getPieEchart({ id: element + "chart" });
        coordinateSystem({
          id: "ele-left" + element,
          color: "rgba(255, 255, 255, 1)",
          color1: "rgba(255, 255, 255, 0.2)",
          title: {
            text: "{a|" + 75 + "%}",
            x: "center",
            y: "center",
            textStyle: {
              rich: {
                a: {
                  fontSize: 8,
                  lineHeight: 14,
                  color: "#fff",
                },
              },
            },
          },
          series: true,
        });
      });
    }, 1000);
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/common.scss';
.area {
  display: flex;
  align-items: center;
}
.erea-box{
  width: 100%;
}
.finally {
  padding: cheight(15) 0;
}
.finally-head {
  display: flex;
  justify-content: space-around;
}
.finally-head-box {
  display: flex;
  /* justify-content: space-around; */
  align-items: center;
  width: 25%;
  margin-left: 50px;
}
.cate {
  font-size: 14px;
  font-family: ShiShangZhongHeiJianTi;
  font-weight: 400;
  color: #cdcdcd;
  padding-left: 4px;
}
.cate-detail {
  font-size: 12px;
  font-family: ShiShangZhongHeiJianTi;
  font-weight: 400;
  color: #4d525b;
  padding-left: 4px;
}
.finally-foot {
  display: flex;
  justify-content: space-around;
}
@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes translate360 {
  0% {
    transform: rotate(0deg);
    transform-origin: top center;
  }
  25% {
    transform: rotate(15deg);
    transform-origin: top center;
  }
  50% {
    transform: rotate(0deg);
    transform-origin: top center;
  }
  75% {
    transform: rotate(-15deg);
    transform-origin: top center;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: top center;
  }
}
.finally-foot > div:nth-child(3) .ele > img {
  animation: rotate360 5s linear infinite;
}
.finally-foot > div:nth-child(2) .ele > img {
  animation: translate360 5s linear infinite;
}
.finally-foot-box {
  padding: 0 cwidth(10);
  width: 25%;
}
.ele {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.ele-left {
  width: 28px;
  height: 28px;
}
.ele-right {
  padding-left: 8px;
}
.ele-right p:first-child {
  font-size: 11px;
  font-family: ShiShangZhongHeiJianTi;
  font-weight: 400;
  color: #f0f0f0;
}
.ele-right p:last-child {
  font-size: 8px;
  font-family: ShiShangZhongHeiJianTi;
  font-weight: 400;
  color: #f0f0f0;
}
.text1 {
  font-size: 18px;
  font-family: ShiShangZhongHeiJianTi;
  font-weight: 400;
  color: #c1c6c8;
  padding: 10px 0;
}
.text2 {
  font-size: 11px;
  font-family: ShiShangZhongHeiJianTi;
  font-weight: 400;
  color: #c1c6c8;
}
.wind-right {
  padding-left: 8px;
}
.p1 {
  font-size: 18px;
  font-family: ShiShangZhongHeiJianTi;
  font-weight: 400;
  color: #4d525b;
}
.p2 {
  font-size: 8px;
  font-family: ShiShangZhongHeiJianTi;
  font-weight: 400;
  color: #7c8189;
}
.text3 {
  font-size: 12px;
  font-family: ShiShangZhongHeiJianTi;
  font-weight: 400;
  color: #9aa0a4;
}
.water {
  padding-top: 10px;
}
.gas {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.gas-rate {
  font-size: 14px;
  font-family: ShiShangZhongHeiJianTi;
  font-weight: 400;
  color: #dee4e7;
  padding: 0 4px;
}
.gas-right {
  padding-left: 8px;
}
.gasp {
  font-size: 8px;
  font-family: ShiShangZhongHeiJianTi;
  font-weight: 400;
  color: #dee4e7;
}
.gasp2 {
  font-size: 12px;
  font-family: ShiShangZhongHeiJianTi;
  font-weight: 400;
  color: #444a4f;
}
</style>
